/* 清除内外边距 */
* {
  margin: 0;
  padding: 0;
}

.margin {
  display :flex;
  align-items:center;
  justify-content:center ;
  width: 600px;
  height: 400px;
  background-color: lightblue;
}

.border {
  display :flex;
  align-items:center;
  justify-content:center ;
  width: 560px;
  height: 360px;
  background-color: lightgrey;
}

.padding {
  display :flex;
  align-items:center;
  justify-content:center ;
  width: 520px;
  height: 320px;
  background-color: lightgreen;
}

.content {
  display :flex;
  align-items:center;
  justify-content:center ;
  width: 480px;
  height: 280px;
  background-color: palevioletred;
}

div>span:first-child {
  background-color: lightblue;
}

div>span:nth-child(2) {
  background-color: lightgray;
}
div>span:nth-child(3) {
  background-color: lightgreen;
}
div>span:last-child {
  background-color: palevioletred;
}

.box-border1 {
  width: 300px;
  height: 200px;
  border: 5px dotted lightgrey;
}

.box-border2 {
  width: 200px;
  height: 200px;
  background-color: pink;
  border: 10px solid red;
}

.box-padding {
  width: 200px;
  height: 200px;
  background-color: pink;
  padding: 10px 20px;
}

.box-margin1, .box-margin2 {
  /* 保证居中则需要设置宽度！ */
  width: 700px;
  height: 80px;
  background-color: palevioletred;
  /* 保证块级盒子在页面上左右横跨是居中的！ */
  margin: 0 auto;
  /* 行内元素或行内块元素水平居中，只需要父级设置 */
  text-align: center;
}

.box-margin1 {
  margin-bottom: 20px;
}

.father {
  width: 300px;
  height: 150px;
  background-color: purple;
  margin-top: 50px;
  overflow: hidden;
}

.son {
  width: 150px;
  height: 75px;
  background-color: tan;
  /* 这个子元素将父元素的margin-top也塌陷为100px！ */
  margin-top: 100px;
}

span {
  margin: 20px;
  background-color: blue;  
}

.span-block {
  display: block;
  margin: 20px;
  background-color: yellowgreen;
}